{extend name="layout/goods" /}

{block name="content"}
    <!--主体-->
    <div class="weui-content">
        <!--产品详情-->
        <div class="weui-tab">
            <div class="weui-navbar" style="position:fixed; top:0; left:0; right:0; height:44px;">
                <a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on" href="#tab1">商品</a>
                <a class="weui-navbar__item proinfo-tab-tit" href="#tab2">详情</a>
            </div>
            <div class="weui-tab__bd proinfo-tab-con">
                <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                    <!--主图轮播-->
                    <div class="swiper-container swiper-zhutu">
                        <div class="swiper-wrapper">
                            {volist name="goods.banner" id="v"}
                            <div class="swiper-slide"><img src="{$v}" /></div>
                            {/volist}
                        </div>
                        <div class="swiper-pagination swiper-zhutu-pagination"></div>
                    </div>
                    <div class="wy-media-box-nomg weui-media-box_text">
                        <h4 class="wy-media-box__title">{$goods.name}</h4>
                        <div class="wy-pro-pri mg-tb-5">¥<em class="num font-20">{$goods.price}</em></div>
                        <!-- <p class="weui-media-box__desc">【2017春季全场2件8】春款薄绒休闲套头纯色印花连帽大码卫衣套装新款上新！！</p> -->
                    </div>
                    <div class="wy-media-box2 txtpd weui-media-box_text">
                        <div class="weui-media-box_appmsg">
                            <div class="weui-media-box__hd proinfo-txt-l" style="line-height: auto;"><span class="promotion-label-tit">运费</span></div>
                            <div class="weui-media-box__bd">
                                <div class="promotion-message clear">
                                    <span class="promotion-item-text">免运费<!--<div class="wy-pro-pri">¥<span class="num">11.00</span></div>--></span>
                                </div>
                            </div>
                        </div>
                        <div class="weui-media-box_appmsg">
                            <div class="weui-media-box__hd proinfo-txt-l" style="line-height: auto;"><span class="promotion-label-tit">提示</span></div>
                            <div class="weui-media-box__bd">
                                <div class="promotion-message clear">
                                    <span class="promotion-item-text"><p class="txt-color-ml">支持7天无理由退换货</p></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab2" class="weui-tab__bd-item ">
                    <div class="pro-detail">
                        {$goods.content}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <span id="tophovertree" title="返回顶部"></span> -->
    <!--底部导航-->
    <div class="foot-black"></div>
    <div class="weui-tabbar wy-foot-menu">
        <a href="javascript:;" id='show-toast' class="promotion-foot-menu-items">
            <div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
            <p class="weui-tabbar__label">{if condition="$collect"}已收藏{else/}收藏{/if}</p>
        </a>
        <a href="{:url('cart/index')}" class="promotion-foot-menu-items">
            <!-- <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> -->
            <div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
            <p class="weui-tabbar__label">购物车</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item yellow-color open-popup" data-target="#join_cart">
            <p class="promotion-foot-menu-label">加入购物车</p>
        </a>
        <a href="{:url('order/info', ['goods_id' => $goods['id']])}" class="weui-tabbar__item red-color">
            <p class="promotion-foot-menu-label">立即购买</p>
        </a>
    </div>
    <div id="join_cart" class='weui-popup__container popup-bottom' style="z-index:600;">
        <div class="weui-popup__overlay" style="opacity:1;"></div>
        <div class="weui-popup__modal">
            <div class="modal-content">
                <div class="weui-msg" style="padding-top:0;">
                    <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
                    <div class="weui-msg__text-area">
                        <h2 class="weui-msg__title">成功加入购物车</h2>
                        <p class="weui-msg__desc">亲爱的用户，您的商品已成功加入购物车，为了保证您的商品快速送达，请您尽快到购物车结算。</p>
                    </div>
                    <div class="weui-msg__opr-area">
                        <p class="weui-btn-area">
                            <a href="{:url('cart/index')}" class="weui-btn weui-btn_primary">去购物车结算</a>
                            <a href="javascript:;" class="weui-btn weui-btn_default close-popup">不，我再看看</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
<script>
$(".swiper-zhutu").swiper({
    loop: true,
    paginationType:'fraction',
    autoplay:5000
});
</script>
<script>
$(document).on("click", "#show-toast", function() {
    if($('#show-toast p').html() == '收藏') {
        $.ajax({
          	url: "{:url('collect/collect')}",
          	data: {goods_id: "{$goods.id}"},
          	success: function(data) {
                if(data.code) {
                    $('#show-toast p').html('已收藏');
                    $.toast(data.msg);
                }
            },
        })
    }else{
        $.ajax({
            url: "{:url('collect/cancel')}",
            data: {goods_id: "{$goods.id}"},
            success: function(data) {
                if(data.code) {
                    $('#show-toast p').html('收藏');
                    $.toast(data.msg);
                }
            },
        })
    }
})

$(document).on("open", ".weui-popup-modal", function() {
    console.log("open popup");
}).on("close", ".weui-popup-modal", function() {
    console.log("close popup");
});

//$(function (){initTopHoverTree("tophovertree",30,10,10); })
function initTopHoverTree(hvtid, times, right, bottom) {
    $("#" + hvtid).css("right", right).css("bottmo", bottom);
    $("#" + hvtid).on("click", function () { goTopHovetree(times); })
    $(window).scroll(function () {
        if ($(window).scrollTop() > 268) {
            $("#" + hvtid).fadeIn(100);
        }
        else {
            $("#" + hvtid).fadeOut(100);
        }
    });
}
//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTopHovetree(times) {
    if (!!!times) {
        $(window).scrollTop(0);
        return;
    }
    var sh = $('body').scrollTop();//移动总距离
    var inter = 13.333;//ms,每次移动间隔时间
    var forCount = Math.ceil(times / inter);//移动次数
    var stepL = Math.ceil(sh / forCount);//移动步长
    var timeId = null;
    function aniHovertree() {
        !!timeId && clearTimeout(timeId);
        timeId = null;
        //console.log($('body').scrollTop());
        if ($('body').scrollTop() <= 0 || forCount <= 0) {//移动端判断次数好些，因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况
            $('body').scrollTop(0);
            return;
        }
        forCount--;
        sh -= stepL;
        $('body').scrollTop(sh);
        timeId = setTimeout(function () { aniHovertree(); }, inter);
    }
    aniHovertree();
}
</script>
{/block}
